<template>
  <div class="ui stackable three column centered grid container">
    <div class="column">
      <h2 class="ui dividing header">
        Sign Up, it's free!
      </h2>

      <Notification
        :message="notification"
        :type="notification.type"
        v-if="notification.message"
      />

      <form class="ui form" @submit.prevent="signup">
        <validation-provider rules="required" v-slot="{ errors }">
        <div class="field">
            <label>Full Name</label>
            <input type="text" name="name" v-model="name" placeholder="Full Name">
            <span class="is-danger">{{ errors[0] }}</span>
          </div>
        </validation-provider>
        <validation-provider rules="required" v-slot="{ errors }">
          <div class="field">
            <label>Username</label>
            <input type="text" name="username" v-model="username" placeholder="Username">
            <span class="is-danger">{{ errors[0] }}</span>
          </div>
        </validation-provider>
        <validation-provider rules="email|required" v-slot="{ errors }">
          <div class="field">
            <label>Email</label>
            <input type="email" name="email" v-model="email" placeholder="Email">
            <span class="is-danger">{{ errors[0] }}</span>
          </div>
        </validation-provider>
        <validation-provider rules="required" v-slot="{ errors }">
          <div class="field">
            <label>Password</label>
            <input type="password" name="password" v-model="password" placeholder="Password">
            <span class="is-danger">{{ errors[0] }}</span>
          </div>
        </validation-provider>
        <div class="ui hidden divider"></div>
        <button class="fluid ui primary button" :disabled="!isFormValid">SIGN UP</button>
        <div class="ui hidden divider"></div>
      </form>

      <div class="ui divider"></div>

      <div class="ui column grid">
        <div class="center aligned column">
          <p>
            Got an account? <router-link to="/login">Log In</router-link>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Notification from '@/components/Notification';

export default {
  name: 'SignUpForm',
  components: {
    Notification,
  },
  data() {
    return {
      name: '',
      username: '',
      email: '',
      password: '',
      notification: {
        message: '',
        type: '',
      },
    };
  },
  computed: {
    isFormValid() {
      return false
    },
  },
  beforeRouteEnter(to, from, next) {
    const token = localStorage.getItem('tweetr-token');

    return token ? next('/') : next();
  },
  methods: {
    signup() {
      axios
        .post('/signup', {
          name: this.name,
          username: this.username,
          email: this.email,
          password: this.password,
        })
        .then(response => {
          localStorage.setItem('tweetr-token', response.data.data.token)
          this.$router.push('/')
        })
        .catch(error => {
          this.notification = Object.assign({}, this.notification, {
            message: error.response.data.message,
            type: error.response.data.status,
          });
        });
    },
  },
};
</script>
